<template>
	<div class="login-box">
		<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="68px" class="login-form">
			<div class="login-title">NoneHand系统</div>
			<el-form-item label="账号" prop="userName">
				<el-input v-model="loginForm.userName" placeholder="请输入账号" />
			</el-form-item>
			<el-form-item label="密码" prop="userPassword">
				<el-input type="password" v-model="loginForm.userPassword" placeholder="请输入密码" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitLogin(loginFormRef)">登录</el-button>
				<el-button type="primary" @click="handleAdd">注册</el-button>
			</el-form-item>
		</el-form>
	</div>
	<!-- 对话框 -->
	<el-dialog v-model="showDialog" :title="dialogTitle" width="500">
		<component :is="showComp" v-if="showComp" :userId="showUserId" @refreshEvent="handleRefresh"></component>
	</el-dialog>
</template>

<script setup>
import {
	ElMessage
} from 'element-plus'
import axios from 'axios';
import {
	ref,
	reactive
} from 'vue';
import {
	useRouter
} from 'vue-router'
// 导入注测组件
import UserAdd from './useradmin/add.vue';

const router = useRouter()
// 初始化弹窗
const showDialog = ref(false)
// 弹窗标题
const dialogTitle = ref('')
// 动态切换组件
const showComp = ref(null)
// 传递的userId参数
const showUserId = ref(null)


// 初始化响应式表单对象
const loginForm = ref({
	userName: '',
	userPassword: ''
})
const loginFormRef = ref()
const loginRules = reactive({
	userName: [{
		required: true,
		message: '请输入账号',
		trigger: 'blur'
	}],
	userPassword: [{
		required: true,
		message: '请输入密码',
		trigger: 'blur'
	}],
})
// 监听点击登录按钮时 执行的方法
const submitLogin = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			// 表单校验成功 发送请求给登录接口
			handleLogin()
		}
	})
}
// 监听点击注册按钮时 执行的方法
const handleAdd = () => {
	showDialog.value = true
	dialogTitle.value = '注册用户'
	showComp.value = UserAdd
	showUserId.value = null
}
// 监听新增或者修改子组件回调刷新 
const handleRefresh = () => {
	showDialog.value = false
	showUserId.value = null
}
// 处理登录的网络请求方法
const handleLogin = () => {
	axios.post('/api/script/user/login', loginForm.value)
		.then(res => {
			if (res.data.code === 200) {
				const user_name = loginForm.value.userName; // 获取输入的用户名
				localStorage.setItem('user_name', user_name); // 将用户名存储在 localStorage
				ElMessage({
					message: '登录成功',
					type: 'success',
				});
				router.push({
					path: '/index',// 登录成功后跳转到首页
				});

			} else {
				ElMessage({
					message: '输入的账号或者密码错误',
					type: 'error',
				});
			}
		})
		.catch(error => {
			ElMessage({
				message: '请求失败: ' + error.message,
				type: 'error',
			});
		});
}
</script>

<style scoped>
.login-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: url('../assets/images/login-bg.jpg') no-repeat;
	background-size: cover
}

.login-title {
	margin: 20px 0;
	text-align: center;
	color: #707070;
	font-size: 22px;
}

.login-form {
	width: 400px;
	border-radius: 5px;
	padding: 20px;
	background-color: white;
}
</style>